<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <ul>
    <li>鸣人</li>
    <li>悟空</li>
    <li>佐助</li>
    <li>路飞</li>
  </ul>
  <ul id="box">

  </ul>
  <script src="./jquery-3.4.1.min.js"></script>
  <script>
    // 元素集合转为数组
    var arr = $.map($("li"), function (ele, index) {
      // ele 每个元素 原生元素
      //index 下标
      return ele.innerHTML
    })
    console.log(arr.reverse())
    // toArray() 元素集合转为数组
    console.log($("li").toArray().reverse())
    // $.each(arr或元素集合,function(){})
    var list = ["花生", "瓜子", "八宝粥", "啤酒"];

    var str = ''
    $.each(list, function (index, ele) {
      // ele 数组的每一项
      //index 数组下标
      console.log(ele)
      str += `<li>${ele}</li>`
    })
    $("#box").html(str)
    // $.each(元素集合,function(index,ele){})
    $.each($("li"), function (index, ele) {
      if (index % 2 == 0) {
        ele.style.background = "red"
      } else {
        ele.style.background = "blue"
      }
    })

  </script>
</body>

</html>